<template>
  <div class="container-sex" style="position: relative">
    <div class="top">
      <p class="title">热门景区排行</p>
      <span class="deco"></span>
    </div>
    <div class="spot" ref="spot" style="width: 100%; height: 300px"></div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import * as echarts from "echarts";

const spot = ref();
onMounted(() => {
  let mychart = echarts.init(spot.value);
  var colorArray = [
    {
      top: "#ffa800", //黄
      bottom: "rgba(11,42,84,.3)",
    },
    {
      top: "#1ace4a", //绿
      bottom: "rgba(11,42,84, 0.3)",
    },
    {
      top: "#4bf3ff", //蓝
      bottom: "rgba(11,42,84,.3)",
    },
    {
      top: "#4f9aff", //深蓝
      bottom: "rgba(11,42,84,.3)",
    },
    {
      top: "#b250ff", //粉
      bottom: "rgba(11,42,84,.3)",
    },
  ];
  const option = {
    tooltip: {
      show: true,
      formatter: "{b}:{c}",
    },
    grid: {
      left: "5%",
      top: 0,
      right: "1%",
      bottom: "8%",
      containLabel: true,
    },

    xAxis: {
      type: "value",
      show: false,
      position: "top",
      axisTick: {
        show: false,
      },
      axisLine: {
        show: false,
        lineStyle: {
          color: "#fff",
        },
      },
      splitLine: {
        show: false,
      },
    },
    yAxis: [
      {
        type: "category",
        axisTick: {
          show: false,
          alignWithLabel: false,
          length: 5,
        },
        splitLine: {
          //网格线
          show: false,
        },
        inverse: "true", //排序
        axisLine: {
          show: false,
          lineStyle: {
            color: "#fff",
          },
        },
        data: ["武功山", "梧桐山", "九寨沟", "黄鹤楼", "长江大桥"],
      },
    ],
    series: [
      {
        name: "能耗值",
        type: "bar",
        label: {
          normal: {
            show: true,
            position: "right",
            formatter: "{c}",
            textStyle: {
              color: "white", //color of value
            },
          },
        },
        itemStyle: {
          normal: {
            show: true,
            color: function (params) {
              let num = colorArray.length;
              return {
                type: "linear",
                colorStops: [
                  {
                    offset: 0,
                    color: colorArray[params.dataIndex % num].bottom,
                  },
                  {
                    offset: 1,
                    color: colorArray[params.dataIndex % num].top,
                  },
                  {
                    offset: 0,
                    color: colorArray[params.dataIndex % num].bottom,
                  },
                  {
                    offset: 1,
                    color: colorArray[params.dataIndex % num].top,
                  },
                  {
                    offset: 0,
                    color: colorArray[params.dataIndex % num].bottom,
                  },
                  {
                    offset: 1,
                    color: colorArray[params.dataIndex % num].top,
                  },
                  {
                    offset: 0,
                    color: colorArray[params.dataIndex % num].bottom,
                  },
                  {
                    offset: 1,
                    color: colorArray[params.dataIndex % num].top,
                  },
                  {
                    offset: 0,
                    color: colorArray[params.dataIndex % num].bottom,
                  },
                  {
                    offset: 1,
                    color: colorArray[params.dataIndex % num].top,
                  },
                  {
                    offset: 0,
                    color: colorArray[params.dataIndex % num].bottom,
                  },
                  {
                    offset: 1,
                    color: colorArray[params.dataIndex % num].top,
                  },
                ],
                //globalCoord: false
              };
            },
            barBorderRadius: 70,
            borderWidth: 0,
            borderColor: "#333",
          },
        },
        barGap: "10%",
        barCategoryGap: "50%",
        data: [160, 132, 89, 77, 60],
      },
    ],
  };
  mychart.setOption(option);
});
</script>

<style lang="scss" scoped>
.container-sex {
  margin: 10px 0px 0px 20px;
  background: url(../../images/dataScreen-main-rt.png) no-repeat;
  background-size: 100% 100%;
  // border: 1px solid cadetblue;
  .top {
    position: relative;
    // border: 1px solid red;
    height: 60px;
    .title {
      color: white;
      font-size: 20px;
    }
    .deco {
      background: url(../../images/dataScreen-title.png);
      display: inline-block;
      width: 68px;
      height: 7px;
    }
  }
}
</style>
